<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height: 60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click.native="openAddRoleDialog"
          >
            新增角色
          </el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="roleList">
          <el-table-column
            align="center"
            type="index"
            :index="indexMethod"
            label="序号"
            width="120"
          />
          <el-table-column align="center" prop="name" label="名称" width="240" />
          <el-table-column align="center" prop="description" label="描述" />
          <el-table-column align="center" label="操作" width="240">
            <!-- 此处的{row} row:是固定的，因为是结构数据的来 scope.row obj.row  -->
            <template #default="{ row }">
              <el-button size="small">分配权限</el-button>
              <el-button size="small" @click.native="updateRole(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click.native="delRole(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination
            layout="prev,pager,next"
            :total="total"
            :page-size="params.pagesize"
            :current-page="params.page"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 引入子组件 -->
    <!-- @close="closeRoleDialog" -->
    <son-dialog
      ref="sonDialog"
      :role-dialog-visible="roleDialogVisible"
      @close="closeRoleDialog"
      @update-list="fetchRoleList"
    />
  </div>
</template>
<script>
/*
  渲染列表
  1. 封装接口 参数
  2. 准备一个响应式的数据
  3. 再methods中封装一个方法 部门调用接口 负责把后端数据交给响应式数据
  4. 把响应式数据按照组件要求，绑定刀tabl
*/
import { getRoleList, deleteRole } from '@/api/setting'
import sonDialog from './son-dialog.vue'
export default {
  components: {
    sonDialog
  },
  data() {
    return {
      roleList: [],
      params: {
        // 第几页
        page: 1,
        // 每页显示条目数
        pagesize: 10
      },
      total: 0,
      // 控制弹窗
      roleDialogVisible: false
    }
  },
  computed: {
    // // 表格索引
    // indexMethod(index) {
    //   // 选择第二页是,indexMethod的值就应该为前面的页数乘每页多少条
    //   // （当前页码-1）* （当前每页的条数+1）
    //   // 从几开始
    //   return (this.params.page - 1) * this.params.pagesize + 1
    // }
  },
  mounted() {
    this.fetchRoleList() // 获取角色列表
  },
  methods: {
    // 表格索引
    indexMethod(index) {
      // index 是 0
      // 选择第二页是,indexMethod的值就应该为前面的页数乘每页多少条
      // （当前页码-1*当前每页的条数 + 1
      // 返回值 ： 每一页从几开始
      // return index + 1
      return index + (this.params.page - 1) * this.params.pagesize + 1
    },
    // 渲染列表
    async fetchRoleList() {
      const { rows, total } = await getRoleList(this.params)
      this.roleList = rows
      this.total = total
    },
    // 当前页数 改变时会触发
    currentChange(page) {
      this.params.page = page
      // 重新渲染数据
      this.fetchRoleList()
    },
    // 删除操作
    delRole(id) {
      // console.log(id)
      // 询问
      this.$confirm('此操作将删除该角色信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteRole(id)
          this.fetchRoleList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 打开弹窗
    openAddRoleDialog() {
      this.roleDialogVisible = true
    },
    // 关闭弹窗
    closeRoleDialog() {
      this.roleDialogVisible = false
    },
    // 点击修改时触发
    updateRole(id) {
      // 使用id请求详情回显操作
      /**
       问题： 接口的必要参数id来自父组件，但是回填操作的数据再子组件中
       1. 把id传给子组件，在子组件中使用id获取数据
       2.直接获取子组件的实例对象，调用它内部的方法或者直接操作树形
       */
      this.roleDialogVisible = true
      this.$refs.sonDialog.getRoleDetail(id)
    }
  }
}
</script>
